<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">
	
	<script src="scripts/jquery-1.7.1.js" type="text/javascript"></script>
	<script src="scripts/jquery.timer.js" type="text/javascript"></script>
	<script src="scripts/highcharts.js" type="text/javascript"></script>
	<script src="scripts/json2.js" type="text/javascript"></script>

	<script type="text/javascript">
   	$.ajaxSetup ({
		cache: false
	});
	

	var chart;
	var chart1; // globally available
	var arrayForBarData = [];
	var arrayForBarCats = [];

	var timerId = 0;

	$(document).ready(function() {		
		getData(true);
		//timer.play();
		//window.setTimeOut('startUpdate()',4000);
		timerId=window.setInterval('getData(false)', 3000);

		window.setTimeOut('stopData()',60000);
		});

		function startUpdate(){
			timerId=window.setInterval('getData(false)', 2000);
		}
		function stopData(){
			alert("stopping the interval");
			clearInterval(timerId);
		}
		
		function getData(animate) {
		    $.ajax(
				{
				    type: "GET",
				    dataType: "JSON",
				    accepts: "JSON",
				    url: "test.json",
				    data: {},
				    success: function (data) {
				        //console.log(data);
						var topArray = [];
						count = 0;
				        $.each(data, function(key, value) {
							var innerArray = [];

							innerArray[0] = key;
							innerArray[1]=parseInt(value);
							if(animate == false){
								//alert( "The key is '" + key + "' and the value is '" + value + "'" );
								if(innerArray[0] == "Yes"){
									innerArray[1] = innerArray[1] + 5;
									//alert(">>" + innerArray[1]);
								}								
								//alert(innerArray);
							}
							arrayForBarData[count] = innerArray[1];
							arrayForBarCats[count] = innerArray[0];

							topArray[count] = innerArray;
							count++;
						});
						if(animate == false){
							loadChart(topArray,animate);
							loadBar(arrayForBarData,arrayForBarCats,animate);
						}else{
							loadChartInit(topArray);
							loadBarInit(arrayForBarData,arrayForBarCats);
						}
				    }
				});
		}
		
		
		function loadBarInit(arrayForBarData,arrayForBarCats,animate){
				  chart1 = new Highcharts.Chart({
			 chart: {
				renderTo: 'containerbar',
				type: 'bar'
			 },
			 title: {
				text: ' '
			 },
			 xAxis: {
//				categories: ['Apples', 'Bananas', 'Oranges']
				categories: arrayForBarCats
			 },
			 yAxis: {
				title: {
				   text: 'Count'
				}
			 },
			 series: [{
				showInLegend: false,
				name: '',
				//data: [1, 0, 4],
				data: arrayForBarData,
				animation: {
					duration:2000
				}
			 }]
		  });
		}
		
			
		function loadBar(arrayForBarData,arrayForBarCats,animate){
				  chart1 = new Highcharts.Chart({
			 chart: {
				renderTo: 'containerbar',
				type: 'bar'
			 },
			 title: {
				text: ' '
			 },
			 xAxis: {
//				categories: ['Apples', 'Bananas', 'Oranges']
				categories: arrayForBarCats
			 },
			 yAxis: {
				title: {
				   text: 'Count'
				}
			 },
			 series: [{
				showInLegend: false,
				name: '',
				//data: [1, 0, 4],
				data: arrayForBarData,
				animation: animate
			 }]
		  });
		}
			
		function loadChartInit(topArray,animate){
			
			
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'containerpie',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'SW-SLC Lunch - Twitter Poll'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Browser share',
						data: topArray,
						animation: {
							duration:2000
						}
					}]
				});
			}

		function loadChart(topArray){
			
			
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'containerpie',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'SW-SLC Lunch - Twitter Poll'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Browser share',
						data: topArray,
						animation:false
					}]
				});
			}
			
			
			function loadGeoChart(){
				window.location="geochart.html";
			}
	</script>

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="styles/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="styles/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <h1>Pie Chart</h1>
      <p>
	  
	  
	          <div class="hero-unit">
            <h1>Tweet Graph - Chart Demo!</h1>
            <p>Try some of these charts.</p>
            <p><a class="btn btn-primary btn-large" href="javascript:loadGeoChart()">View Geo-Chart &raquo;</a></p>
          </div>
	
	<table border=0 width=100%><tr><td align=center>
	<div id="containerbar" style="width: 400px; height: 400px"></div>  
	</td><td align=center>
	<div id="containerpie" style="width: 400px; height: 400px"></div> 
	</td></tr></table>
		  
	  </p>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="scripts/jquery.js"></script>
    <script src="scripts/bootstrap-transition.js"></script>
    <script src="scripts/bootstrap-alert.js"></script>
    <script src="scripts/bootstrap-modal.js"></script>
    <script src="scripts/bootstrap-dropdown.js"></script>
    <script src="scripts/bootstrap-scrollspy.js"></script>
    <script src="scripts/bootstrap-tab.js"></script>
    <script src="scripts/bootstrap-tooltip.js"></script>
    <script src="scripts/bootstrap-popover.js"></script>
    <script src="scripts/bootstrap-button.js"></script>
    <script src="scripts/bootstrap-collapse.js"></script>
    <script src="scripts/bootstrap-carousel.js"></script>
    <script src="scripts/bootstrap-typeahead.js"></script>

  </body>
</html>
